<template>
  <div class="editor-container">
    <!-- 工具栏 -->
    <Toolbar
        v-if="editor"
        :editor="editor"
        :defaultConfig="toolbarConfig"
        class="toolbar"
    />

    <!-- 编辑器内容区 -->
    <Editor
        v-model="content"
        :defaultConfig="editorConfig"
        class="editor-content"
        @onCreated="onCreated"
        @onChange="onChange"
        @onDestroyed="onDestroyed"
    />
  </div>
</template>

<script setup>
import { ref, shallowRef, onBeforeUnmount, watch, nextTick } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 引入编辑器样式
import '@wangeditor/editor/dist/css/style.css'

// 编辑器实例（必须用 shallowRef）
const editor = shallowRef(null)

// 编辑器内容（双向绑定）
const content = ref('<p>请输入内容...</p>')

// 工具栏配置：移除图片上传按钮
const toolbarConfig = {
  // 排除不需要的菜单，重点移除 'uploadImage'（图片上传）
  excludeKeys: [
    'uploadImage',       // 移除图片上传按钮
    'insertVideo',       // 可选：移除视频上传（如需保留可删除此行）
    'fullScreen',        // 可选：移除全屏功能
    'codeBlock',         // 可选：移除代码块（按需调整）
  ]
}

// 编辑器核心配置：禁用图片上传相关功能
const editorConfig = {
  placeholder: '请输入内容...',
  // 禁用粘贴图片（防止用户通过粘贴插入图片）
  pasteFilterStyle: true,
  pasteIgnoreImg: true,  // 忽略粘贴的图片
  // 移除所有图片上传相关配置（关键）
  MENU_CONF: {}  // 清空菜单配置，确保无图片上传逻辑
}

// 编辑器创建回调
const onCreated = (editorInstance) => {
  editor.value = editorInstance
  console.log('编辑器初始化完成')
  // 强制编辑器重新渲染以确保正确显示
  nextTick(() => {
    if (editor.value) {
      editor.value.scrollTo(0)
    }
  })
}

// 内容变化回调
const onChange = (editorInstance) => {
  console.log('当前内容：', content.value)
}

// 编辑器销毁回调
const onDestroyed = () => {
  console.log('编辑器已销毁')
  editor.value = null
}

// 监听内容变化，确保编辑器正确更新
watch(content, (newVal) => {
  if (editor.value && newVal !== undefined) {
    // 避免无限循环更新
    const editorContent = editor.value.getHtml()
    if (newVal !== editorContent) {
      nextTick(() => {
        if (editor.value) {
          editor.value.setHtml(newVal)
        }
      })
    }
  }
})

// 组件销毁前，手动销毁编辑器（防止内存泄漏）
onBeforeUnmount(() => {
  if (editor.value) {
    editor.value.destroy()
    editor.value = null
  }
})

// 对外暴露方法（供父组件调用）
defineExpose({
  // 获取编辑器内容
  getContent: () => {
    // 优先从编辑器实例获取内容
    if (editor.value) {
      return editor.value.getHtml()
    }
    return content.value
  },
  // 设置编辑器内容
  setContent: (html) => {
    if (editor.value) {
      nextTick(() => {
        if (editor.value) {
          editor.value.setHtml(html || '')
          content.value = html || ''
        }
      })
    } else {
      content.value = html || ''
    }
  },
  // 清空内容
  clearContent: () => {
    if (editor.value) {
      editor.value.clear()
    }
    content.value = ''
  },
  // 手动刷新编辑器（解决对话框中显示问题）
  refresh: () => {
    nextTick(() => {
      if (editor.value) {
        // 触发编辑器重新布局
        const selection = editor.value.getSelection()
        editor.value.restoreSelection(selection)
        editor.value.scrollTo(0)
      }
    })
  }
})
</script>

<style scoped>
.editor-container {
  border: 1px solid #ddd;
  border-radius: 6px;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
}

.toolbar {
  border-bottom: 1px solid #ddd;
  padding: 5px 10px;
  background-color: #f9f9f9;
  min-height: 40px;
}

.editor-content {
  min-height: 300px;
  padding: 10px;
  height: auto;
}

/* 解决编辑器内部样式穿透问题 */
:deep(.w-e-text-container) {
  border: none !important;
  z-index: 1 !important;
  min-height: 260px;
  height: auto;
}

/* 确保工具栏在对话框中正确显示 */
:deep(.w-e-toolbar) {
  flex-wrap: wrap;
  overflow-x: hidden;
}

/* 确保编辑器在对话框中不被遮挡 */
:deep(.w-e-editor) {
  position: relative;
  z-index: 10;
}

/* 修复对话框中编辑器可能出现的滚动条问题 */
:deep(.w-e-scroll) {
  overflow-y: auto;
}
</style>

<style>
/* 全局样式，确保在对话框中正常显示 */
.el-dialog .editor-container {
  max-width: none;
}

/* 防止编辑器被Element Plus对话框样式影响 */
.el-dialog .w-e-text-container {
  border: none !important;
}
</style>